<template>
  <div class="shelf-management">
    <!-- 顶部功能区 -->
    <div class="top-bar">
      <div class="search-section">
        <!-- 修改为搜索框样式 -->
        <el-input
          v-model="warehouseSearch"
          placeholder="请输入仓库名称"
          clearable
          style="width: 200px; margin-right: 10px"
          @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><search /></el-icon>
          </template>
        </el-input>
        
        <el-input
          v-model="productSearch"
          placeholder="请选择商品"
          clearable
          style="width: 200px; margin-right: 10px"
        />
        
        <el-input
          v-model="shelfSearch"
          placeholder="请输入货架或备注"
          clearable
          style="width: 200px; margin-right: 10px"
        />
        
        <el-checkbox v-model="showDisabled">显示禁用货架</el-checkbox>
        &nbsp;&nbsp;&nbsp;
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </div>
      
      <div class="action-buttons">
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-button @click="handlePrint">打印货架标签</el-button>
        <el-button @click="handleDisable" :disabled="!selectedShelves.length">禁用</el-button>
        <el-button @click="handleDelete" :disabled="!selectedShelves.length">删除</el-button>
        <el-button @click="handleImport">导入</el-button>
        <el-button @click="handleExport">导出</el-button>
      </div>
    </div>

    <!-- 主表格区 -->
    <div class="main-table">
      <el-table
        :data="tableData"
        style="width: 100%"
        empty-text="暂无数据"
        @selection-change="handleSelectionChange"
      >
        <!-- 多选框列 -->
        <el-table-column
          type="selection"
          width="55"
          align="center"
        />
        
        <!-- 操作列 -->
        <el-table-column label="操作" width="120" align="center">
          <template #default="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleSingleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        
        <!-- 商品信息列 -->
        <el-table-column prop="productName" label="商品" width="180" />
        <el-table-column prop="productCode" label="商品编码" width="120" />
        <el-table-column prop="specification" label="规格型号" width="120" />
        <el-table-column prop="attributes" label="属性" width="120" />
        
        <!-- 货架信息列 -->
        <el-table-column prop="shelfName" label="货架名称" width="120" />
        <el-table-column prop="area" label="货区" width="100" />
        <el-table-column prop="warehouse" label="仓库" width="120" />
        <el-table-column prop="availableStock" label="仓库可用库存" width="120" align="right" />
        
        <!-- 状态信息列 -->
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'enabled' ? 'success' : 'danger'" size="small">
              {{ scope.row.status === 'enabled' ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <!-- 制单信息列 -->
        <el-table-column prop="creator" label="制单人" width="100" />
        <el-table-column prop="createTime" label="制单时间" width="160" />
        
        <!-- 备注列 -->
        <el-table-column prop="remark" label="备注" />
      </el-table>
    </div>

    <!-- 分页区 -->
    <div class="pagination">
      <span class="total">共{{ totalItems }}条</span>
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalItems"
        layout="prev, pager, next"
        @current-change="handlePageChange"
      />
      <span class="page-size">{{ pageSize }}条/页</span>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'

export default {
  name: 'ShelfManagement',
  components: {
    Search
  },
  setup() {
    // 搜索条件
    const warehouseSearch = ref('') // 修改为搜索框绑定的变量
    const productSearch = ref('')
    const shelfSearch = ref('')
    const showDisabled = ref(false)
    
    // 分页
    const currentPage = ref(1)
    const pageSize = ref(50)
    const totalItems = ref(0)
    
    // 选中的货架
    const selectedShelves = ref([])
    
    // 表格数据
    const tableData = reactive([])
    
    // 方法
    const handleSearch = () => {
      currentPage.value = 1
      // 这里添加搜索逻辑
    }
    
    const handleSelectionChange = (selection) => {
      selectedShelves.value = selection
    }
    
    const handleAdd = () => {
      console.log('新增货架')
    }
    
    const handleEdit = (row) => {
      console.log('编辑货架:', row)
    }
    
    const handlePrint = () => {
      console.log('打印货架标签')
    }
    
    const handleDisable = () => {
      if (selectedShelves.value.length === 0) return
      console.log('禁用选中的货架:', selectedShelves.value)
    }
    
    const handleDelete = () => {
      if (selectedShelves.value.length === 0) return
      console.log('删除选中的货架:', selectedShelves.value)
    }
    
    const handleSingleDelete = (row) => {
      console.log('删除单个货架:', row)
    }
    
    const handleImport = () => {
      console.log('导入货架数据')
    }
    
    const handleExport = () => {
      console.log('导出货架数据')
    }
    
    const handlePageChange = (val) => {
      currentPage.value = val
      // 这里添加分页逻辑
    }
    
    return {
      warehouseSearch,
      productSearch,
      shelfSearch,
      showDisabled,
      currentPage,
      pageSize,
      totalItems,
      selectedShelves,
      tableData,
      handleSearch,
      handleSelectionChange,
      handleAdd,
      handleEdit,
      handlePrint,
      handleDisable,
      handleDelete,
      handleSingleDelete,
      handleImport,
      handleExport,
      handlePageChange
    }
  }
}
</script>

<style scoped>
.shelf-management {
  height: 100vh;
  background-color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.top-bar {
  margin-bottom: 20px;
}

.search-section {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.main-table {
  flex: 1;
  overflow: hidden;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20px;
}

.total {
  margin-right: 20px;
  font-size: 14px;
  color: #606266;
}

.page-size {
  margin-left: 20px;
  font-size: 14px;
  color: #606266;
}

.el-table {
  border: 1px solid #e6e6e6;
}

.el-table::before {
  height: 0;
}
</style>